<template>
	<view>
		<!-- 今日计划模块 -->
		<view class="v0box">
			<image src="../../static/images/banshu.png"></image>
			<view class="v0tit">
				<view>我的</view>
				<view>计划</view>
			</view>
			<view class="v0body">
				<view>需新学<text>0</text>词</view>
				<view>需复习<text>{{tongji1.toBeLearn ? tongji1.toBeLearn : 0  }}</text>词</view>
			</view>
			<view class="v0but">
				<view>开始</view>
				<view>学习</view>
			</view>
		</view>
		<view class="planbox">
			<view class="plan" @click="tongji">
				<view class="v1">
					<view>
						<view class="plantit">未学</view>
						<view class="plannum">{{tongji1.unknown ? tongji1.unknown : 0  }}<text>词</text></view>
					</view>
					<view>
						<view class="plantit">需复习</view>
						<view class="plannum">{{tongji1.toBeLearn ? tongji1.toBeLearn : 0  }}<text>词</text></view>
					</view>
					<view>
						<view class="plantit">全部</view>
						<view class="plannum">{{tongji1.total ? tongji1.total : 0 }}<text>词</text></view>
					</view>
					<view>
						<image src="@/static/images/yjt.png" class="myicon"></image>
					</view>
				</view>
				<view class="v2">
					<view>每日<text class="b1"> 10 </text>词,剩余<text class="b1"> 0 </text>天</view>
					<view>
						<progress activeColor="#3F9D83" active percent="20"></progress>
					</view>
					<view class="sptext">
						<text>已学单词</text>
						<text>0/0</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"plan",
		props:['tongji1'],
		data() {
			return {
				
			};
		},
		methods:{
			tongji(){
				uni.navigateTo({
					url:'../../pages/tongji/tongji'
				})
			}
		}
	}
</script>

<style scoped>
	.v0box{
		margin-top: 15px;
		height: 15vh;
		width: 95vw;
		box-sizing: border-box;
		padding:2vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-radius: 0 15vh 15vh 0;
		background:linear-gradient(135deg,#82D774,#4BC383,#1EB28E,#1EB28E);
	}
	.v0tit{
		margin-left: 10px;
		color: #FFFFFF;
		font-size: 23px;
		line-height: 26px;
		font-weight: bold;
	}
	.v0body{
		margin: 0 5vw;
		font-size: 14px;
		color: #FFFFFF;
	}
	.v0body text{
		font-style: italic;
		margin: 0 5px;
		font-size: 20px;
		font-weight: bold;
	}
	.v0but{
		border-radius: 13vh;
		height: 13vh;
		width: 13vh;
		display: flex;
		flex-wrap: wrap;
		color: #f4f4f4;
		font-size: 20px;
		line-height: 22px;
		font-weight: bold;
		justify-content: center;
		align-content: center;
		background:linear-gradient(#FBBD2F,#F67F21) ;
	}
	.v0but view{
		width: 100%;
		text-align: center;
	}
	.planbox{
		margin: 15px;
	}
	.plan{
		background-color: #FFFFFF;
		margin-bottom: 10px;
		padding: 5vw;
		border-radius: 5px;
	}
	.plan .v1{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-bottom: 10px;
	}
	.plantit{
		color: #999;
		margin-bottom: 5px;
		font-size: 12px;
	}
	.plannum{
		margin-top: 5px;
		font-style: italic;
		font-weight: bold;
		color: #3F9D83;
		font-size: 30px;
	}
	.plannum text{
		margin-left: 5px;
		font-size: 12px;
		color: #333;
		font-style: normal;
	}
	.myicon{
		width: 18px;
		height: 18px;
	}
	.b1{
		font-weight: bold;
	}
	.v2{
		color: #999;
		padding-top: 10px;
	}
	.v2 view{
		margin-bottom: 10px;
	}
	.sptext{
		display: flex;
		justify-content: space-between;
	}
	.v3{
		display: flex;
		margin: 10px 0;
	}
	.v3>view{
		flex: 1;
	}
	.shixin{
		background-color: #3F9D83;
		color: #FFFFFF;
	}
	.kx{
		border: #3F9D83 1px solid;
		color: #3F9D83;
	}
	.v0box image{
		margin-left: 10px;
		width: 50px;
		height: 70px;
	}
</style>
